<template>
    <main-wrap style="background:#022424" :type="1">
        <div class="loginBox">
            <div class="logo">
                <img src="/images/logo2.png"/>
            </div>
            <div class="logMain">
                <p class="txt">欢迎使用元界，请您登录</p>
                <div class="inputBox">
                    <my-input v-model="phone" type="number" label="手机号码" placeholder="请输入您的手机号码"/>
                    <my-input v-model="code" label="验证码" placeholder="请输入验证码" style="border:0">
                        <template v-slot:right>
                            <smsCode @getCode="sendCode" ref="sendEle" :time="120"/>
                        </template>
                    </my-input>
                </div>
                <div class="cbxy">
                    <my-checkbox v-model="checked">我同意
                        <router-link to="/policy/1">“用户使用协议”</router-link>
                    </my-checkbox>
                </div>
                <div class="btnBox">
                    <my-button text="登录" @click="login"/>
                </div>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onBeforeUnmount,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import myInput from '@/components/myInput.vue'
import smsCode from '@/components/smsCode.vue'
import myButton from '@/components/myButton.vue'
import myCheckbox from '@/components/myCheckbox.vue'
import {checkMobile,toast,H5CallAPPFuction} from '@/utils/common'
import Cookies from '@/utils/auth'
export default {
    components:{
        mainWrap,
        myInput,
        smsCode,
        myButton,
        myCheckbox
    },
    setup(){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            phone:'',
            code:'',
            flag:false,
            checked:true
        })

        onMounted(()=>{
            // const token = Cookies.get('token')
            // if(token){

            // }
            
            const inputInfo = JSON.parse(sessionStorage.getItem('inputInfo'))
            if(inputInfo){
                state.phone = inputInfo.phone
                state.code = inputInfo.code
            }
        })

        onBeforeUnmount((e)=>{
           // Cookies.set('phone',state.phone)
            //Cookies.set('code',state.code)
            sessionStorage.setItem('inputInfo',JSON.stringify({phone:state.phone,code:state.code}))
        })

        const sendCode = async ()=>{
            if(!state.phone){
                return toast('请输入手机号')
            }
            const res = await store.dispatch('user/sendCode',{mobile:state.phone})
            if(res.success){
                state.flag = true
                toast('验证码已经发送')
                proxy.$refs.sendEle.countDown()  // 开始倒计时
            }else{
                toast(res.message)
            }
        }
        const login = async()=>{
            if(!state.phone){
                return toast('请输入手机号')
            }else if(!state.code){
                return toast('手机号输入验证码')
            }else if(!state.checked){
                return toast('还没有同意用户使用协议')
            }
            const res = await store.dispatch('user/login',{
                phone:state.phone,
                code:state.code
            })
            if(!res.success) return toast(res.message)
            Cookies.set('token',res.data.token)
            // 获取用户信息
            const res2 = await store.dispatch('arApi/get_userInfo')
            if(!res2.success) return toast('获取用户信息失败')
            const userInfo = {...res2.data,token:res.data.token}
            //router.push('/collection')
            try {
                H5CallAPPFuction('loginSuccessful',JSON.stringify(userInfo))  // 调用app的loginSuccessful方法，并把用户信息传过去
            } catch (error) {
                router.push('/')
            }
            
        }

        return{
            ...toRefs(state),
            sendCode,
            login
        }
    }
}
</script>

<style lang="scss" scoped>
    .loginBox{
        padding: 0;
        .logo{
            width: 173px;
            height: 279px;
            margin: 0 auto;
            margin-top:128px ;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .logMain{
            padding:120px 50px 0 50px;
            .txt{
                color: #fff;
                font-size: 28px;
                padding: 0 0 30px 0;
            }
            .inputBox{
                border: 1px solid var(--baseColor);
                padding: 0 30px;
            }
            .cbxy{
                padding: 30px 0 0 0;
                a{
                    color: var(--baseColor);
                    text-decoration: underline;
                }
            }
            .btnBox{
                padding: 50px 0 0 0;
            }
        }
    }
</style>
